<template>
  <div>
    <div id="aaa"></div>
    <button @click="print">打印</button>
    <!-- <button @click="print2">批量打印</button> -->

  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$pluginName.init();
      const $hiprintTemplate = new this.$pluginName.PrintTemplate({
        template: {
          "panels": [{
            "index": 0,
            "name": 1,
            "height": 297,
            "width": 210,
            "paperHeader": 49.5,
            "paperFooter": 780,
            "printElements": [{
              "options": {
                "left": 35,
                "top": 72.5,
                "height": 288,
                "width": 90,
                "formatter": "function(t,e){return`<table border=\"1\">  \n  <tr>  \n    <th>列1</th>  \n    <th>列2</th>  \n    <th>列3</th>  \n  </tr>  \n  <tr>  \n    <td>A1</td>  \n    <td>B1</td>  \n    <td>C1</td>  \n  </tr>  \n  <tr>  \n    <td>A2</td>  \n    <td>B2</td>  \n    <td>C2</td>  \n  </tr>  \n  <tr>  \n    <td>A3</td>  \n    <td>B3</td>  \n    <td>C3</td>  \n  </tr>  \n  <tr>  \n    <td>A4</td>  \n    <td>B4</td>  \n    <td>C4</td>  \n  </tr>  \n</table>  `}",
                "coordinateSync": false,
                "widthHeightSync": false,
                "right": 124.5,
                "bottom": 361.5,
                "vCenter": 79.5,
                "hCenter": 217.5
              },
              "printElementType": {
                "title": "html",
                "type": "html"
              }
            }],
            "paperNumberLeft": 565.5,
            "paperNumberTop": 819,
            "paperNumberContinue": true,
            "watermarkOptions": {
              "content": "vue-plugin-hiprint",
              "rotate": 25,
              "timestamp": true,
              "format": "YYYY-MM-DD HH:mm"
            },
            "panelLayoutOptions": {}
          }, {
            "index": 0,
            "name": 1,
            "height": 297,
            "width": 210,
            "paperHeader": 49.5,
            "paperFooter": 780,
            "printElements": [{
              "options": {
                "left": 35,
                "top": 72.5,
                "height": 288,
                "width": 90,
                "formatter": "function(t,e){return`<table border=\"1\">  \n  <tr>  \n    <th>列1</th>  \n    <th>列2</th>  \n    <th>列3</th>  \n  </tr>  \n  <tr>  \n    <td>A1</td>  \n    <td>B1</td>  \n    <td>C1</td>  \n  </tr>  \n  <tr>  \n    <td>A2</td>  \n    <td>B2</td>  \n    <td>C2</td>  \n  </tr>  \n  <tr>  \n    <td>A3</td>  \n    <td>B3</td>  \n    <td>C3</td>  \n  </tr>  \n  <tr>  \n    <td>A4</td>  \n    <td>B4</td>  \n    <td>C4</td>  \n  </tr>  \n</table>`}",
                "coordinateSync": false,
                "widthHeightSync": false,
                "right": 124.5,
                "bottom": 361.5,
                "vCenter": 79.5,
                "hCenter": 217.5
              },
              "printElementType": {
                "title": "html",
                "type": "html"
              }
            }],
            "paperNumberLeft": 565.5,
            "paperNumberTop": 819,
            "paperNumberContinue": true,
            "watermarkOptions": {
              "content": "vue-plugin-hiprint",
              "rotate": 25,
              "timestamp": true,
              "format": "YYYY-MM-DD HH:mm"
            },
            "panelLayoutOptions": {}
          }]
        }
      })

      this.$hiprintTemplate = $hiprintTemplate;
    },
    print() {
      //调用其中一种
      this.$hiprintTemplate.print({});
    },
    print2() {
      //直接打印，需要安装客户端
      this.$hiprintTemplate.print2({});
    },
    // 批量打印
    print3() {
      this.$hiprintTemplate.print(this.printData, {})
    }
  }
}

</script>